<template>
  <div>
    <div class="main">
      <!-- 顶部 -->
      <van-nav-bar fixed>
        <template #left>
          <!-- <img class="header-logo" src="../../assets/logos.png"> -->
        </template>
        <template #right>
          <van-icon name="search" size="0.48rem" color="#fff" @click="searchFn"/>
        </template>
      </van-nav-bar>
    </div>
    <!-- 顶部滑动导航条 -->
    <!-- 在标签指定 name 属性的情况下，v-model 的值为当前标签的 name（此时无法通过索引值来匹配标签）。 -->
    <van-tabs v-model="channelId" sticky offset-top="1.2rem" animated @change="tabsChangeFn">
      <van-tab :name="item.id" :title="item.name" v-for="item in channelUserList" :key="item.id">
        <!-- 获取文章列表的id传递给每个文章列表组件 -->
        <ArticleList :channelId="channelId" />
      </van-tab>
    </van-tabs>
    <!-- 编辑频道图标 -->
    <van-icon name="plus" size="0.37333334rem" class="moreChannels" @click="showPopup"/>
    <!-- 添加频道的弹出层 -->
    <van-popup v-model="show" get-container="body" class="contain-popup">
      <!-- 编辑频道组件 -->
      <ChannelEdit 
      :unCheckChannelList="unCheckChannelList" 
      :channelUserList="channelUserList" 
      @addFnEV="addFnEV"
      @userChannelRemoveFn="userChannelRemoveFn"
      @closeFn="closeFn"
      v-model="channelId"
      />
    </van-popup>
  </div>
</template>

<script>
  import {
    getUserChannelApi,
    getAllChannelsApi,
    updateChannelApi,
    removeChannelApi
  } from '../../api/index.js'
  import ArticleList from '@/views/home/components/ArticleList.vue'
  import ChannelEdit from '@/views/home/ChannelEdit.vue'
  export default {
    name: 'Home',
    data() {
      return {
        channelId: 0, // 当前频道ID
        channelAllList: [], // 获取所有频道
        channelUserList:[],// 获取用户已选的频道
        show: false, // 添加频道的弹出层控制
        channelScrollT:{} // 每个频道保存自己的滚动条位置,格式:频道id:scrollTop的值
      };
    },
    created() {
      this.getUserChannels()
      this.getAllChannels()
    },
    components: {
      ArticleList,
      ChannelEdit
    },
    computed:{
      // 计算用户还未选中的频道
      unCheckChannelList(){
       return  this.channelAllList.filter(allChannelObj=>{
          let indexRes = this.channelUserList.findIndex(userChannelObj=>{
            return allChannelObj.id === userChannelObj.id
          })
          // index > -1 就是证明找到了,找到了就是不需要过滤掉的
           if(indexRes > -1){
             return false
           }else{ // -1 的才是我们需要筛选的
             return true
           }
           return indexRes // 这是给filter的结果
        })
      }
    },
    methods: {
      // 获取用户已选的信息频道
      async getUserChannels() {
        try {
          let {
            data: res
          } = await getUserChannelApi()
          // console.log(res,'用户')
          this.channelUserList = res.data.channels
        } catch (e) {
          console.log(e)
        }
      },
      // 获取全部信息频道
      async getAllChannels(){
       let {data:res} = await getAllChannelsApi()
       // console.log(res,'全部')
       this.channelAllList = res.data.channels
      },
      // 添加频道的弹出层事件
      showPopup(){
         this.show = true;
      },
      // 获取子组件添加新频道的事件回调,保存数组并向后台发起请求保存用户最新选择的频道
      async addFnEV(obj){
        this.channelUserList.push(obj)
        // 过滤掉推荐的对象
        let filterArr = this.channelUserList.filter(x=>x.id !== 0)
        // 对用户已选择的数组进行重组,删除name,新添加seq字段
        let newArr = filterArr.map((obj,index)=>{
          console.log(obj,'obj')
          let res = {...obj} 
          delete res.name
          res.seq = index
          return res
        })
        // 同步更新到后台,用户已选择的频道,该api传递的是重组后的数组
        let res = await updateChannelApi({
           channels:newArr
        })
      },
      // 删除用户已选频道
      async userChannelRemoveFn(obj){
        // 老师的方法
        // let index = this.channelUserList.findIndex(item=>item.id === obj.id)
        // this.channelUserList.splice(index,1)
        // 我的方法
        this.channelUserList = this.channelUserList.filter(x=>x.id !== obj.id)
        let res = await removeChannelApi(obj.id)
        console.log(res)
      },
      // 关闭频道管理弹窗事件
      closeFn(id){
        this.show = false
        // if(id){ // 实现方式1
        //   this.channelId = id
        // }
        // 实现方式2 利用v-model的双向绑定,子组件使用自定义事件时传递的是input事件,父组件会在原地绑定一个 input 事件,把子组件传递过来的值赋值给v-model后绑定的值
      },
      // 点击搜索框事件
      searchFn(){
        this.$router.push('/search')
      },
      // tabs栏切换时的事件
      tabsChangeFn(){
        // console.log(this.channelScrollT,'change')
        // tab切换后,设置滚动条位置
        // tab切换时,这个组件内部,会把切走的容器height设置为0,滚动条因为没有高度回到了顶部
        // 切换来的一瞬间,没有高度,滚动事件从底下上来也被触发了,所以才把数据里设置为0(把原来对象里保存的值覆盖掉了)
        // 切换来的一瞬间,高度为0,你设置滚动位置也没用
        // 这个 window.scroll 事件,只要滚动条一有变化它都会触发,像dom未加载完成时,高度是0,它就会触发赋值
       this.$nextTick(()=>{
          document.documentElement.scrollTop = this.channelScrollT[this.channelId]
          document.body.scrollTop = this.channelScrollT[this.channelId]
       })
      },
      // 获取滚动条的位置
      scrollFn(){
		  // this.$notify({message:document.body.scrollTop})
        // 保存全局 window 的当前滚动条位置
        this.$route.meta.scrollT = document.documentElement.scrollTop || document.body.scrollTop
        // 保存当前频道自己的滚动条位置(保存为对象的格式)
        this.channelScrollT[this.channelId] = document.documentElement.scrollTop || document.body.scrollTop
        console.log(this.channelScrollT,'windowscroll')
        console.log(this.$route.meta.scrollT,'scrollT')
      }
    },
    // 激活时候的生命周期函数
    activated(){
      // window 和 document,监听网页滚动的事件
      // html标签获取scrollTop,滚动的距离,和设置滚动的距离
      window.addEventListener('scroll',this.scrollFn)
      // 页面被激活时立刻设置,滚动条位置(兼容写法)
      document.documentElement.scrollTop = this.$route.meta.scrollT
      document.body.scrollTop = this.$route.meta.scrollT
    },
    // 失活时候的生命周期函数
    deactivated(){
      // 离开时解绑事件
      window.removeEventListener('scroll',this.scrollFn)
    },
  };
</script>

<style scoped>
  .contain-popup{
    width: 100vw;
    height: 100vh;
  }
  /* 设置 tabs 容器的样式 */
  /deep/ .van-tabs__wrap {
    padding-right: 30px;
    background-color: #fff;
  }

  /* 设置小图标的样式 */
  .moreChannels {
    position: fixed;
    top: 60px;
    right: 8px;
    z-index: 999;
  }

  .header-logo {
    width: 100px;
    height: 30px;
  }

  .main {
    padding-top: 46px;
  }
</style>
